<!-- input的失去焦点和获取焦点事件 -->
<template>
	<view>
		<view class="wrapper">
			<input :value="content" @focus="focus" @blur="blur"/>
			<image :class="flag ? 'active' : ''" src="@/static/image/chicken.gif"></image>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	const content = ref('')
	const flag = ref(false)
	//获取焦点
	const focus  = (e)=>{
		flag.value = true
	}
	//失去焦点
	const blur = (e)=>{
		flag.value = false
	}
</script>

<style lang="scss">
	      .wrapper{
			  margin-top:40rpx;
			  padding:50rpx;
			  position: relative;
			  input{
				  width: 100%;
				  height: 80rpx;
				  border:1rpx solid #ccc;
				  padding: 4rpx 8rpx;
				  position: relative;
				  box-sizing:border-box;
				  z-index: 2;
				  background:#ffffff;
			  }
			  image{
				  width: 48rpx;
				  height: 48rpx;
				  position: absoult;
				  z-index: 1;
				  top:-80rpx;
				  left:calc(50% - 24rpx);
			  }
			  .active{
				  top:-130rpx
			  }
		  } 
</style>
